<template>
  <div class="film" v-if="filmInfo.length !== 0">
    <detail-header v-top :title="filmInfo.name"></detail-header>
    <lazy-img
      :img-src="filmInfo.poster"
    ></lazy-img>
    <div class="film-detail bg-white">
      <div class="clearfix">
        <div class="film-name fl">
          <span class="name">{{ filmInfo.name }}</span><span class="item" v-if="filmInfo.filmType">{{ filmInfo.filmType.name }}</span>
        </div>
        <div class="film-grade fr" v-if="filmInfo.grade"><span class="grade">{{ filmInfo.grade }}</span><span class="grade-text">分</span></div>
      </div>
      <div class="film-category grey-text">{{ filmInfo.category }}</div>
      <div class="film-premiere-time grey-text" v-if="filmInfo.premiereAt">{{ filmInfo.premiereAt | parseTime('{y}-{m}-{d}') }}上映</div>
      <div class="film-nation-runtime grey-text">{{ filmInfo.nation }} | {{ filmInfo.runtime }}分钟</div>
      <div class="test grey-text" ref="test">{{ filmInfo.synopsis }}</div>
      <div class="film-synopsis grey-text" ref="synopsis" :class="!isShow ? 'desc-hide': ''">
        {{ filmInfo.synopsis }}
      </div>
      <div class="toggle bg-white" @click="handleShow">
        <img src="@/assets/images/arrow_down.png" alt="" :class="{'upper': isShow}" />
      </div>
    </div>

    <div class="actors bg-white">
      <div class="title-bar bg-white">
        <span class="title-text">演职人员</span>
      </div>
      <div class="row-scroll-wrapper actors-list bg-white" v-if="filmInfo.actors">
        <ul class="row-scroll-items-nav">
          <li class="row-scroll-item" v-for="(item, index) in filmInfo.actors" :key="index">
            <div class="actors-item" style="text-align: center">
              <lazy-img :width="'.86rem'" :height="'.86rem'"
                :img-src="item.avatarAddress"
              ></lazy-img>
              <span class="actors-name ellipsis">{{ item.name }}</span
              ><span class="actors-role ellipsis">{{ item.role }}</span>
            </div>
          </li>
          <li class="padding-right-li"></li>
        </ul>
      </div>
    </div>

    <div class="photos bg-white">
      <div class="title-bar">
        <span class="title-text">剧照</span
        ><span class="to-all" v-if="filmInfo.photos"
          >全部({{filmInfo.photos.length}})<img src="@/assets/images/arrow_right.png"
        /></span>
      </div>
      <div class="row-scroll-wrapper photos-list">
        <ul class="row-scroll-items-nav" v-if="filmInfo.photos">
          <li class="row-scroll-item photos-item-wrap" v-for="(item, index) in filmInfo.photos" :key="index" @click="handlePriview(index)">
            <div class="photos-item">
              <lazy-img :width="'1.5rem'" :height="'1rem'"
                :img-src="item"
              ></lazy-img>
            </div>
          </li>
          <li class="padding-right-li"></li>
        </ul>
      </div>
    </div>

    <a href="#/film/5342/cinemas" class="purchase-ticket"><div class="goSchedule">选座购票</div></a>
  </div>
</template>

<script>
import Vue from 'vue'
import http from '@/utils/http' // 别名 @ src的绝对路径
import LazyImg from '@/components/LazyImg'
import DetailHeader from './components/DetailHeader'

import { ImagePreview, Toast } from 'vant'

Vue.use(Toast)

// row-scroll-wrapper 如果使用swiper组件，在一个页面中多次引入注意，区分类名，防止组件混淆

Vue.directive('top', { // 指令可操作dom
  inserted (el) {
    // el.style.display = none;
    if (document.body.scrollTop || document.documentElement.scrollTop > 50) {
      el.classList.add('show-header')
    } else {
      el.classList.remove('show-header')
    }
    window.onscroll = () => {
      if ((document.body.scrollTop || document.documentElement.scrollTop) > 50) {
        // el.style.display = 'block'
        el.classList.add('show-header')
      } else {
        // el.style.display = 'none'
        el.classList.remove('show-header')
      }
    }
  },
  unbind () {
    window.onscroll = null
  }
})

export default {
  name: 'Detail',
  components: { LazyImg, DetailHeader },
  data () {
    return {
      filmId: '',
      isShow: false,
      filmInfo: {}
    }
  },
  methods: {
    handlePriview (index) {
      ImagePreview({
        images: this.filmInfo.photos,
        startPosition: index,
        loop: false
      })
    },
    handleShow () {
      this.isShow = !this.isShow
    },
    getData () {
      http({
        url: `/gateway?filmId=${this.filmId}&k=5328718`,
        headers: {
          'X-Host': 'mall.film-ticket.film.info'
        }
      })
        .then((response) => {
          const res = response.data
          if (res.status === 0) {
            const data = res.data
            this.filmInfo = data.film
            this.$nextTick(() => {
              // 展开功能动态获取内容高度
              if (this.$refs.test && this.$refs.test.offsetHeight) {
                this.$refs.synopsis.style.height = this.$refs.test.offsetHeight + 'px'
              }
            })
            // Toast.clear()
          }
        })
        .catch(() => {})
    }
  },
  mounted () {
    // Toast.loading({
    //   message: '加载中...',
    //   forbidClick: true,
    //   loadingType: 'spinner',
    //   duration: 0
    //   // overlay: true
    // });
    // this.$route 当前匹配的路由信息
    this.filmId = this.$route.params.id // 获取id
    // console.log(this.$route.query.id)
    this.getData()
  }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";

.purchase-ticket {
  position: fixed;
  bottom: 0px;
  left: 0;
  right: 0;
  width: 100%;
  height: 0.5rem;
  line-height: 0.5rem;
  font-size: 0.16rem;
  color: #fff;
  text-align: center;
  background-color: #ff5f16;
}
.grey-text {
  font-size: .13rem;
  color: #797d82;
  margin-top: .04rem;
}
.film-detail {
  padding: .14rem .14rem .26rem;
  height: auto;
  overflow: hidden;
  .film-grade {
    text-align: right;
    color: #ffb232;
    .grade {
      font-size: .2rem;
      font-style: italic;
    }
    .grade-text {
      font-size: .1rem;
    }
  }
}
.film-name {
  span {
    display: inline-block;
    vertical-align: middle;
  }
  .name {
    margin-right: .05rem;
    height: .24rem;
    line-height: .24rem;
    font-size: .18rem;
    color: #191a1b;
    overflow: hidden;
  }
  .item {
    height: .14rem;
    line-height: .14rem;
    padding: 0 2px;
    color: #fff;
    font-size: .1rem;
    background-color: #d2d6dc;
    border-radius: 2px;
  }
}
.desc-hide {
  height: .4rem!important;
  transition: height .5s ease;
  overflow: hidden;
}
.film-synopsis {
  margin-top: .12rem;
  transition: height .5s ease;
  overflow: hidden;
}
.toggle {
  text-align: center;
  width: .2rem;
  height: .18rem;
  margin: auto;
  margin-bottom: -.18rem;
  img {
    width: .16rem;
    height: 100%;
  }
  .upper {
    transform: rotate(180deg);
  }
}
.test {
  width: calc(100vw - .28rem);
  opacity: 0;
  position: absolute;
  top: 1px;
  margin-left: -10000px;
}
.actors {
  margin-top: .1rem;
  .actors-name {
    display: block;
    padding-top: .05rem;
    font-size: .13rem;
    color: #191a1b;
  }
  .actors-role {
    display: block;
    font-size: .12rem;
    color: #797d82;
  }
}
.photos {
  margin-top: .1rem;
  margin-bottom: .6rem;
}
.title-bar {
  width: 100%;
  padding: .14rem;
  font-size: .16rem;
  color: #191a1b;
}
.to-all {
  display: flex;
  align-items: center;
  line-height: .22rem;
  font-size: .13rem;
  color: #797d82;
  float: right;
  img {
    width: .08rem;
    height: .12rem;
    margin-left: .02rem;
  }
}
.row-scroll-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  ul {
    padding-left: .14rem;
    padding-bottom: .1rem;
    .row-scroll-item {
      margin-right:.08rem;
      width: .86rem;
      text-align: center;
    }
    .padding-right-li {
      width: 2px;
      clear: both;
      cursor: pointer;
      &:after {
        content: ".";
        visibility: hidden;
      }
    }
    .photos-item-wrap {
      min-width: 1.5rem;
    }
  }
}
.row-scroll-items-nav {
  display: flex;
  position: relative;
  width: 100%;
}
::-webkit-scrollbar {
  display: none;
}
</style>
